<template>
   <header class="msite_header">
      <slot name="left"></slot>
      <span class="header_title">
         <span class="header_title_text ellipsis">{{title}}</span>
      </span>
      <slot name="right"></slot>
   </header>
</template>

<script>
export default {
   name: "HeaderTop",
   props: {
      title: {
         type: String,
         required: false,
         default: ''
      }
   },
};
</script>

<style scoped lang="stylus">
@import'../../common/stylus/mixins.styl'

.msite_header {
   background: var(--theme) var(--bgimg);
   background-image: cover;
   position: fixed;
   z-index: 100;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   color: #ff;
   width: 100%;
   max-width: 750px;
   height: 45px;
   line-height: 45px
   padding: 0 8px;
   box-sizing: border-box;
   font-size: 18px;
   .iconfont { cursor: pointer;}
   .header_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;

      text-align: center;
      .header_title_text {
         display: block;
      }
   }

   .header_login {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
   }
}
</style>